<template>
  <Header />
  <div class="main-container">
    <!-- 轮播图区域 -->
<div class="carousel-section" style="width: 30%;">
  <h3 class="section-title">精选推荐</h3>
  <el-carousel class="custom-carousel" height="300px" :interval="4000" arrow="always">
    <el-carousel-item v-for="(image, index) in images" :key="index">
      <div class="carousel-content">
        <el-image :src="image" fit="cover" class="carousel-image" />
      </div>
    </el-carousel-item>
  </el-carousel>
</div>


    <!-- 热门文章区域 -->
    <div class="hot-articles-section">
      <h3 class="section-title">热门文章</h3>
      <div class="articles-container">
        <el-card
          v-for="post in blogPosts1"
          :key="post.id"
          class="article-card"
          @click="articleDetail(post.id)"
        >
          <div class="article-content">
            <el-image :src="post.coverImg" class="article-thumbnail" />
            <div class="article-info">
              <h2 class="article-title">{{ post.title }}</h2>
              <div class="article-meta">
                <span class="meta-item">
                  <i class="el-icon-user"></i>
                  <el-icon><UserFilled /></el-icon>{{ post.username }}
                </span>
                <span class="meta-item">
                  <i class="el-icon-view"></i>
                 <el-icon><View /></el-icon> {{ post.viewCount }}
                </span>
                <span class="meta-item" v-if="post.id">
                  <LikeButton :show-button="false" :targetId="post.id" :likeType="1" />
                </span>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>

    <!-- 日历区域 -->
 <div class="calendar-section">
  <el-calendar v-model="value" class="custom-calendar">
    <template #header="{ date }">
      <span>{{ date }}</span>
      <el-button-group>
        <el-button size="small" @click="selectDate('today')">今天</el-button>
        <el-button size="small" @click="selectDate('prev-month')">上月</el-button>
        <el-button size="small" @click="selectDate('next-month')">下月</el-button>
      </el-button-group>
    </template>
  </el-calendar>

  <!-- 添加近期活动列表 -->
  <div class="recent-events">
    <h4 class="events-title">近期活动</h4>
    <ul class="events-list">
      <li v-for="event in upcomingEvents" :key="event.id" class="event-item">
        <div class="event-date">{{ event.date }}</div>
        <div class="event-content">
          <h5>{{ event.title }}</h5>
          <p>{{ event.description }}</p>
        </div>
      </li>
    </ul>
  </div>
</div>

  </div>

  <!-- 推荐文章区域 -->
  <div class="recommend-container">
    <div class="recommend-articles">
      <h3 class="section-title">推荐文章</h3>
      <el-card
        v-for="post in blogPosts"
        :key="post.id"
        class="recommend-card"
        @click="articleDetail(post.id)"
      >
        <div class="recommend-content">
          <el-image :src="post.coverImg" class="recommend-thumbnail" />
          <div class="recommend-info">
            <div class="time-info">
              <i class="el-icon-time"></i>
              <span>发布时间：{{ post.createTime }}</span>
            </div>
            <h2 class="recommend-title">{{ post.title }}</h2>
            <div class="recommend-meta">
              <span class="meta-item">
                <i class="el-icon-user"></i>
                {{ post.username }}
              </span>
              <span class="meta-item">
                <i class="el-icon-view"></i>
                {{ post.viewCount }}
              </span>
              <span class="meta-item">
                <LikeButton :targetId="post.id" :likeType="1" />
              </span>
            </div>
            <div
              class="article-excerpt"
              v-html="truncateText(post.renderedContent, 70)"
            ></div>
            <div class="categories">
              <el-tag
                v-for="(category, index) in post.categoryName"
                :key="index"
                class="category-tag"
              >
                <i class="el-icon-collection-tag"></i>
                {{ category }}
              </el-tag>
            </div>
            <el-tag class="status-tag" :type="getStatusType(post.state)">
              {{ post.state }}
            </el-tag>
          </div>
        </div>
      </el-card>
    </div>
    <div class="side-image">
      <el-image :src="sideImage" fit="cover" class="side-image-content" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import Header from '@/components/Header.vue'
import myImage1 from '../assets/img/03.jpg'
import myImage2 from '../assets/img/04.jpg'
import myImage3 from '../assets/img/05.jpg'
import myImage4 from '../assets/img/06.jpg'
import sideImage from '../assets/img/04.jpg'
import request from "@/api/request"
import router from "@/router"
import VueMarkdownEditor, { xss } from "@kangc/v-md-editor"
import { ElMessage, ElMessageBox} from "element-plus";
import LikeButton from "@/components/LikeButton.vue"
import moment from "moment"
import {parseToken} from "@/api/tokenDecode";
const value = ref(new Date())
const images = [myImage1, myImage2, myImage3, myImage4]
const blogPosts = ref<BlogPost[]>([])
const blogPosts1 = ref<BlogPost[]>([])

interface BlogPost {
  id: number | any
  title: string | any
  content: string | any
  coverImg: string | any
  categoryName: string | any
  username: string | any
  viewCount: string | any
  createTime: string | any
  state: string | any
  renderedContent: string
}

const getStatusType = (status: string) => {
  switch(status) {
    case '已发布': return 'success'
    case '草稿': return 'warning'
    case '已删除': return 'danger'
    default: return 'info'
  }
}
// 在script部分添加以下数据和方法
const hotTags = ref(['前端开发', 'Vue3', 'TypeScript', 'Element Plus', 'Web设计', 'Node.js', 'CSS技巧'])
const upcomingEvents = ref([
  { id: 1, date: '04-10', title: '技术分享会', description: 'Vue3最新特性解析' },
  { id: 2, date: '04-25', title: '线上直播', description: 'Element Plus最佳实践' },
  { id: 3, date: '05-01', title: '社区活动', description: '开源项目贡献指南' }
])

const selectDate = (type: string) => {
  const now = new Date()
  switch(type) {
    case 'today':
      value.value = now
      break
    case 'prev-month':
      value.value = new Date(now.getFullYear(), now.getMonth() - 1, 1)
      break
    case 'next-month':
      value.value = new Date(now.getFullYear(), now.getMonth() + 1, 1)
      break
  }
}

const getHot = async () => {
  try {
    const res = await request.get('/article/hotArticles', { params: { limit: 5 } })
    blogPosts1.value = res.data
  } catch (error) {
    console.error('获取热门文章失败:', error)
  }
}

const articleDetail = async (postId: number) => {
  try {
    await request.get('/article/viewCount', { params: { articleId: postId } })
    router.push({ name: 'ArticleDetail', params: { id: postId } })
  } catch (error) {
    console.error('增加浏览量失败:', error)
  }
}

const truncateText = (text: string, maxLength: number) => {
  if (!text) return ''
  return text.length > maxLength ? text.slice(0, maxLength) + '...' : text
}
import dayjs from 'dayjs';
const getArticles = async (pageNum: number, pageSize: number) => {
  try {
    const token = localStorage.getItem('token')
    let tokenPayload = parseToken(token)?.claims
    console.log(tokenPayload)
    const res = await fetch(`http://localhost:5000/recommend/${tokenPayload.id}`)

    if (res.ok) {
      const data = await res.json();
      const newPosts = data.recommendations.map((post: any) => {
        return {
          id: post.item_id,
          title: post.title,
          coverImg: post.cover_img,
          categoryName: post.categories,
          content: '',
          username: post.username,
          viewCount: post.view_count,
          createTime: dayjs(post.create_time).format('YYYY/MM/DD HH:mm:ss'),
          state: '已发布',
          renderedContent: ''
        };
      });

      blogPosts.value = [...blogPosts.value, ...newPosts];
    }
  } catch (error) {
    console.error('获取推荐文章失败:', error);
  }
}


onMounted(() => {
  getHot()
  getArticles(1, 5)
})
</script>

<style scoped>
.main-container {
  max-width: 1200px;
  width: 100%;
  margin: 50px auto;
  display: flex;
  flex-direction: row;
  gap: 20px;
  padding: 20px 0;
}

.section-title {
  color: #333;
  font-size: 20px;
  margin-bottom: 16px;
  font-weight: 600;
  position: relative;
  padding-left: 12px;
}

.section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 16px;
  background: #409EFF;
  border-radius: 2px;
}

/* 轮播图样式 */
/* 轮播图优化样式 */
.carousel-content {
  position: relative;
  width: 100%;
  height: 100%;
}

.carousel-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  color: white;
  padding: 20px;
}

.carousel-title {
  font-size: 22px;
  margin-bottom: 8px;
}

.carousel-desc {
  font-size: 14px;
  margin-bottom: 12px;
  opacity: 0.9;
}

.view-button {
  margin-top: 10px;
}

.tag-cloud {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cloud-tag {
  cursor: pointer;
  transition: all 0.3s;
}

.cloud-tag:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* 日历区域优化样式 */
.recent-events {
  margin-top: 10px;
  background: #f9fafc;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.events-title {
  font-size: 16px;
  color: #333;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
}

.events-list {
  list-style: none;
  padding: 0;
}

.event-item {
  display: flex;
  padding: 10px 0;
  border-bottom: 1px dashed #eee;
}

.event-date {
  width: 50px;
  font-weight: bold;
  color: #409EFF;
}

.event-content {
  flex: 1;
}

.event-content h5 {
  margin: 0 0 5px 0;
  font-size: 14px;
}

.event-content p {
  margin: 0;
  font-size: 12px;
  color: #666;
}

/* 热门文章样式 */
.hot-articles-section {
  width: 40%;
}

.articles-container {
  display: flex;
  flex-direction: column;
  height: 500px;
  gap: 12px;
}

.article-card {
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
  border: none;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
  background-color: #f9fafc;
}

.article-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.article-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.article-thumbnail {
  width: 60px;
  height: 60px;
  border-radius: 8px;
}

.article-info {
  flex: 1;
}

.article-title {
  font-size: 18px;
  margin: 0;
  color: #333;
  font-weight: 500;
}

.article-meta {
  display: flex;
  gap: 16px;
  margin-top: 4px;
  font-size: 14px;
  color: #909399;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 日历样式 */
.calendar-section {
  margin-top: 60px;
  width: 30%;
}

.custom-calendar {
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  padding: 16px;
  background-color: #f9fafc;
}

/* 覆盖 Element UI 日历单元格样式 */
.custom-calendar :deep(.el-calendar-table__row) {
  height: 62px; /* 调整行高 */
}

.custom-calendar :deep(.el-calendar-day) {
  height: 32px !important; /* 调整单元格高度 */
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 调整日历头部样式 */
.custom-calendar :deep(.el-calendar__header) {
  padding: 8px 0;
}

/* 调整日历标题样式 */
.custom-calendar :deep(.el-calendar__title) {
  font-size: 14px;
  line-height: 1.5;
}


/* 保持近期活动列表的样式不变 */
.recent-events {
  margin-top: 50px;
  /* 其他样式保持不变 */
}


/* 推荐文章区域 */
.recommend-container {
  max-width: 1200px;
  width: 100%;
  margin: -80px auto 20px;
  display: flex;
  gap: 20px;
}


.recommend-articles {
  width: 70%;
  margin-top: -340px;
}

.recommend-card {
  margin-bottom: 20px;
  border-radius: 8px;
  border: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
  cursor: pointer;
  padding: 16px;
  background-color: #f9fafc;
}
.recommend-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(32, 107, 196, 0.2); /* 改为蓝色系阴影 */
}

.recommend-content {
  display: flex;
  gap: 20px;
  position: relative;
  padding: 12px;
  background: linear-gradient(145deg, #ffffff, #f8fafe); /* 添加渐变背景 */
  border-radius: 12px;
}

.recommend-thumbnail {
  border-radius: 12px;
  object-fit: cover;
  width: 200px; /* 固定缩略图宽度 */
  height: 150px; /* 固定缩略图高度 */
  border: 2px solid #f0f4ff; /* 更柔和的边框颜色 */
  transition: transform 0.3s ease;
  box-shadow: 4px 4px 15px rgba(173, 186, 255, 0.1); /* 添加光晕效果 */
}

.recommend-thumbnail:hover {
  transform: scale(1.02);
}

.recommend-info {
  flex: 1;
  padding: 0 15px;
}
.time-info {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: linear-gradient(135deg, #4a6cf31a 0%, #889dff1a 100%);
  border-radius: 8px;
  margin-bottom: 15px;
  color: #4a6cf3;
  font-size: 14px;
  font-family: 'Segoe UI', system-ui, sans-serif;
  border: 1px solid rgba(74, 108, 243, 0.15);
  position: relative;
  transition: all 0.3s ease;
  backdrop-filter: blur(2px);
}

.time-info:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(74, 108, 243, 0.15);
}

.time-info::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background: linear-gradient(135deg, #4a6cf310 0%, #889dff10 100%);
  z-index: -1;
}

.time-info i {
  color: #6b8cff;
  font-size: 18px;
  filter: drop-shadow(0 2px 4px rgba(107, 140, 255, 0.2));
}

.recommend-title {
  font-size: 26px;
  margin: 0 0 20px;
  color: #1a2b6d;
  font-weight: 800;
  line-height: 1.3;
  position: relative;
  padding-left: 32px;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  background: linear-gradient(135deg, #1a2b6d 0%, #2c3e8f 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  width: fit-content;
}

.recommend-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 80%;
  background: linear-gradient(180deg, #4a6cf3 0%, #889dff 100%);
  border-radius: 3px;
  box-shadow: 0 4px 12px rgba(74, 108, 243, 0.3);
  transition: height 0.3s ease;
}

.recommend-title:hover::before {
  height: 100%;
}

.recommend-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 40%;
  height: 2px;
  background: linear-gradient(90deg, #4a6cf3 0%, transparent 100%);
  transition: width 0.3s ease;
}

.recommend-title:hover::after {
  width: 70%;
}



.recommend-meta {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
  font-size: 14px;
  color: #909399;
}

.article-excerpt {
  color: #666;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 12px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.categories {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.category-tag {
  background-color: #f0f9ff;
  color: #409EFF;
  border-color: #d9ecff;
  padding: 4px 8px;
}

.status-tag {
  position: absolute;
  right: 16px;
  bottom: 16px;
  padding: 4px 8px;
}

.side-image {
  width: 30%;
  margin-top: 24px;
}

.side-image-content {
  width: 100%;
  height: 260px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
</style>
